<template>
  <u-overlay :show="show" class="coupon-detail">
    <view class="coupon-detail__content">
      <zm-image :src="getQrCode()" width="326rpx" height="326rpx"> </zm-image>
    </view>
    <view class="coupon-detail__close" @click="onClose"></view>
  </u-overlay>
</template>
<script>
  import ZmImage from '@/commons/ZmImage'
  export default {
    name: 'CouponDetail',
    components: { ZmImage },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      },
      arr: {
        type: Array,
        default: () => {
          return []
        }
      },
      qrCode: {
        type: String,
        default: () => {
          return ''
        }
      }
    },
    data() {
      return {
        topSwiperIndex: 0
      }
    },
    created() {
      this.topSwiperIndex = this.arr.findIndex(
        (item) => item.couponId === this.obj.couponId
      )
    },
    methods: {
      onClose() {
        this.$emit('input', false)
      },
      getQrCode() {
        return this.$utils.qrcodeCreate(this.qrCode)
      }
    },
    computed: {
      show: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .coupon-detail {
    &__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: calc(50% - 200upx);
      margin-top: 300upx;
      width: 400upx;
      height: 400upx;
      // height: 821upx;
      background: #ffffff;
      border-radius: 20upx;
    }
    &__top {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__phone {
      min-width: 55upx;
      margin-left: auto;
      flex-direction: column;
      align-items: center;
      color: #888888;
      font-size: 26upx;
    }
    &__middle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 30upx;
    }
    &__middle--dashed {
      width: 646upx;
      height: 1upx;
      border: 1upx dashed #f9f8f8;
    }
    &__middle--circle-top {
      width: 17upx;
      height: 28upx;
      border-radius: 0 50% 50% 0;
      background: #000;
      opacity: 0.5;
    }
    &__middle--circle-bottom {
      width: 17upx;
      height: 28upx;
      border-radius: 50% 0 0 50%;
      background: #000;
      opacity: 0.5;
    }
    &__top {
      display: flex;
      justify-content: space-between;
      flex: 1;
      padding: 35upx 27upx 28upx 27upx;
    }
    &__bottom {
      padding: 41upx 0 47upx;
      // #ifdef MP-TOUTIAO
      padding-bottom: 100upx;
      // #endif
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 5;
      letter-spacing: 1upx;
    }
    &__num {
      font-size: 24upx;
      color: #3bc5d2;
      letter-spacing: 1.5upx;
    }
    &__qr {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30upx 0;
      padding: 10upx;
      width: 326upx;
      height: 326upx;
      border: 1upx solid rgba(204, 204, 204, 0.5);
    }
    &__code {
      overflow-x: auto;
      padding-left: 42upx;
      display: flex;
      align-items: center;
      width: 514upx;
      height: 78upx;
      background: #f9f9f9;
      border: 1upx solid #f5f5f5;
      border-radius: 14upx;
    }

    &__close {
      margin: 0 auto;
      margin-top: 43upx;
      width: 54upx;
      height: 54upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/white-close.png)
        no-repeat;
      background-size: 100%;
    }

    &__swiper-box {
      position: relative;
    }
    &__swiper {
      width: 340upx;
      height: 340upx;
    }
    &__left-arrow {
      position: absolute;
      top: 50%;
      left: -25%;
      transform: translateY(-50%);
    }
    &__right-arrow {
      position: absolute;
      top: 50%;
      right: -20%;
      transform: translateY(-50%);
    }
  }
</style>
